<template>
	<view class="p-3">
		<view class="flex text-white mt-3" :class="item.btn !== '立即使用' ?'receive':''" v-for="(item,index) in list"
			:key="index">
			<view class="flex-1">
				<view class="flex  flex-column justify-center align-start bg-hover-warning p-2"
					style="border-right:2rpx dashed;border-top-left-radius: 8rpx;border-bottom-left-radius: 8rpx;">
					<view class="font-lg">
						￥{{item.price}}
					</view>
					<text class="font">
						适用{{item.typeName}}：{{item.title}}
					</text>
				</view>
			</view>
			<view hover-class="bg-hover-warning"
				style="width: 200rpx; border-top-right-radius: 8rpx;border-bottom-right-radius: 8rpx;"
				class="flex align-center justify-center bg-warning" @click="onClickCoupon(item)">
				{{item.btn}}
			</view>
		</view>
		<!-- 加载loading -->
		<view class="mt-3">
			<uni-load-more :status="more"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				more: 'loading',
				page: 1,
				limit: 5,
				list: [],
				type: '',
				goods_id: 0
			}
		},
		mounted() {
			this.getData()
		},
		onLoad(e) {
			console.log(e,'e');
			if (e.type && e.goods_id) {
				this.type = e.type
				this.goods_id = e.goods_id
			}
		},
		// 下拉加载 
		onReachBottom() {
			this.reachBottom()
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.getData()
		},
		methods: {
			reachBottom() {
				if (this.more !== 'more') return
				this.page++
				this.getData()
			},
			getData() {
				this.more = 'loading'
				this.$api.getCoupontList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					// formatList对数据添加过期状态
					const rows = this.formatList(res.rows)
					this.list = this.page === 1 ? rows : [...this.list, ...rows],
						console.log(this.list, 'this.list');
					if (res.rows.length < this.limit) {
						this.more = 'noMore'
					} else if (res.rows.length === this.limit) {
						this.more = 'more'
					}
				}).catch(err => {
					this.more = 'more'
					if (this.page > 1) {
						this.page -= 1
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			formatList(list) {
				list.forEach(v => {
					const endTime = new Date(v.end_time).getTime()
					const currentTime = new Date().getTime()
					// 过期状态
					v.expired = currentTime > endTime
					v.btn = v.used === 1 ? '已使用' : (v.expired ? '已过期' : '立即使用')
					v.typeName = v.type === 'course' ? '课程' : '专栏'
					if ((v.btn === '立即使用' && this.type && this.goods_id) && (v.type != this.type || v.goods_id !=
							this.goods_id)) {
						v.btn = '不可用'
					}

				})
				return list
			},
			onClickCoupon(item) {
				if(item.btn !== '立即使用') return
				uni.$emit('chooseCoupon',{
					user_coupon_id:item.id,
					price:parseInt(item.price)
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="less">
	.receive {
		color: #fff;

		.bg-hover-warning,
		.bg-warning {
			background-color: #ccc !important;

		}
	}
</style>
